<template>
  <view class="flex-columna">
    <view
      class="calendar"
      style="background-image: url('../../static/task_calendar_bg.png')"
    >
      <view class="icon-box">
        <view style="display: flex; align-items: center">
          <image
            class="icon"
            src="../../static/task_calendar_icon1.png"
            mode=""
          />
          <text class="f11" style="color: #666666; margin-right: 14rpx"
            >做任务得积分</text
          >
        </view>
        <view style="display: flex; align-items: center">
          <image
            class="icon"
            src="../../static/task_calendar_icon1.png"
            mode=""
          />
          <text class="f11" style="color: #666666">岗位任务</text>
        </view>
      </view>

      <view class="flex-row">
        <view class="flex-columna daybox">
          <view class="daytext">{{ day < 10 ? "0" + day : day }}</view>
          <view class="f14">
            <text>{{ year }}</text
            >/<text>{{ month }}</text
            >/<text>{{ convertedWeek }}</text>
          </view>
        </view>
        <view class="flex-column" v-if="isFinish">
          <view class="flex-rowa" style="margin-top: 28rpx">
            <image
              class="calendar_icon2"
              src="../../static/task_calendar_icon2.png"
              mode=""
            />
            <text class="f12 c_3D">当前事项-未完成</text>
          </view>
          <view style="display: flex">
            <view style="width: 20rpx; height: 108rpx; margin-right: 16rpx">
              <image
                class="width100 height100"
                src="../../static/calendar_icon3.png"
                mode="aspectFit"
              />
            </view>
            <view class="flex-column">
              <view class="flex-rowa">
                <text class="f13 c_11">09:00-10:00</text>
                <view class="finish">完成</view>
              </view>
              <view
                class="f13 c_11"
                :style="{
                  'text-decoration': contentFinish ? 'line-through' : 'none',
                }"
              >
                开始交接班会议内容内容内容内容内容内容内容
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="flex-row" style="margin-top: 28rpx">
            <view class="calendar_icon2">
              <image
                class="width100 height100"
                src="../../static/task_calendar_icon2.png"
                mode=""
              />
            </view>
            <text class="f12 c_3D">恭喜你！今日岗位任务完成啦~</text>
          </view>
          <view class="finish-image">
            <image
              class="width100 height100"
              src="../../static/task_calendar_isfinish.png"
              mode=""
            />
          </view>
        </view>
      </view>
    </view>
    <text class="f14 title">任务执行情况</text>
    <view class="taskList-box">
      <view
        class="taskList"
        v-for="(item, index) in list"
        :key="index"
        @click="clickhandle(item.path)"
        :style="{ margin: index === 1 ? '0 22rpx' : '' }"
      >
        <view class="flex-columna" style="margin-top: 26rpx">
          <image style="width: 64rpx; height: 64rpx" :src="item.icon" mode="" />
          <text class="f13 text">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <!-- 我的任务 -->
    <view class="task-way flex-columna">
      <view class="flex-rowa title-box">
        <text class="f14">我的任务-进行中</text>
        <text class="more">查看全部</text>
      </view>
      <view class="wayList">
        <view class="job" style="background: #ff855a">
          <text class="f12">岗位任务</text>
        </view>
        <view class="job-box">
          <view class="icon">
            <image
              class="width100 height100"
              src="../../static/task_job.png"
              mode=""
            />
          </view>
          <view class="flex-column">
            <view class="flex-rowa">
              <view class="title-text ellipsis-1"
                ><text>每个岗位按时间完成任务</text></view
              >
              <image
                style="width: 28rpx; height: 28rpx"
                src="../../static/job-box_icon1.png"
                mode=""
              />
              <text class="f12 c_11">20</text>
            </view>
            <view class="f11">
              <view style="display: flex; margin: 16rpx 0rpx 18rpx 0rpx">
                <image
                  style="width: 28rpx; height: 28rpx; margin-right: 8rpx"
                  src="../../static/job-box_icon2.png"
                  mode=""
                />
                <text>2023.10.07</text>
              </view>
              <view style="display: flex">
                <image
                  style="width: 28rpx; height: 28rpx; margin-right: 8rpx"
                  src="../../static/job-box_icon3.png"
                  mode=""
                />
                <text>2/10</text>
              </view>
            </view>
          </view>
          <view class="flex-columna">
            <lcircularProgress
              progressColor="#FF855A"
              bgColor="#F4F4F6"
              :boxWidth="(100 / 750) * a"
              :boxHeight="(100 / 750) * a"
              :lineWidth="(10 / 750) * a"
              fontColor="#7B7B85"
              gradualColor="#f57900"
              :fontSize="(24 / 750) * a"
              :percent="20"
            >
            </lcircularProgress>
            <image
              style="width: 90rpx; height: 34rpx"
              src="../../static/task_way_go.png"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
      <view class="wayList">
        <view class="activity" style="background: #4c8eff">
          <text class="f12">活动任务</text>
        </view>
        <view class="icon">
          <image
            class="width100 height100"
            src="../../static/task_activity.png"
            mode=""
          />
        </view>
      </view>
      <view class="wayList">
        <view class="other" style="background: #7979ff">
          <text class="f12">其他任务</text>
        </view>
        <view class="icon">
          <image
            class="width100 height100"
            src="../../static/task_other.png"
            mode=""
          />
        </view>
      </view>
    </view>
    <customTabbar></customTabbar>
  </view>
</template>
<script>
import customTabbar from "../../components/customTabbar";
import utils from "../../utils/units.js";
import lcircularProgress from "../../uni_modules/l-circularProgress/components/l-circularProgress/l-circularProgress";
export default {
  components: {
    customTabbar,
    lcircularProgress,
  },
  data() {
    return {
      list: [
        {
          text: "我发布的",
          icon: "../../static/task_carry1.png",
          path: "/pages/message/message",
        },
        {
          text: "任务分析",
          icon: "../../static/task_carry2.png",
          path: "/pages/ecology/ecology",
        },
        {
          text: "我的下属",
          icon: "../../static/task_carry3.png",
          path: "/pages/login/login",
        },
      ],
      number: "",
      number2: "",
      month: "",
      year: "",
      week: "",
      day: "",
      a: "",
      b: "",
      isFinish: true,
      contentFinish:true
    };
  },
  computed: {
    convertedWeek() {
      switch (this.week) {
        case 1:
          return "星期一";
        case 2:
          return "星期二";
        case 3:
          return "星期三";
        case 4:
          return "星期四";
        case 5:
          return "星期五";
        case 6:
          return "星期六";
        case 0:
          return "星期日";
        default:
          return "未知";
      }
    },
  },
  onLoad() {
    this.a = wx.getSystemInfoSync().windowWidth;

    console.log(11, new Date());
    // this.number = new Date().toLocaleDateString(), //2021/5/22
    // this.time = utils.formatTime(new Date());
    this.week = new Date().getDay();
    this.year = new Date().getFullYear(); //获取年
    this.month = new Date().getMonth() + 1; //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1
    this.day = new Date().getDate();
    console.log(this.year, this.month, this.day, this.week);
  },
  methods: {
    clickhandle(e) {
      console.log(11, e);
      uni.switchTab({
        url: e,
      });
    },
  },
};
</script>
<style lang="less">
.daybox {
  width: 214rpx;
  margin: 28rpx 28rpx 0rpx 54rpx;
  white-space: nowrap;
  .daytext {
    font-size: 80rpx;
  }
}
.calendar_icon2 {
  width: 24rpx;
  height: 24rpx;
  margin-right: 12rpx;
}
.finish {
  width: 126rpx;
  height: 44rpx;
  font-size: 22rpx;
  color: #ffffff;
  background: #476cff;
  border-radius: 262rpx;
  display: flex;
  justify-content: center;
  line-height: 42rpx;
  margin-left: 28rpx;
}
.calendar {
  width: 702rpx;
  height: 360rpx;
  background-size: cover;
  margin-top: 30rpx;
  .icon-box {
    display: flex;
    margin: 68rpx 0 0 44rpx;
    .icon {
      width: 24rpx;
      height: 24rpx;
      margin-right: 8rpx;
    }
  }
}
.title {
  color: #111111;
  margin: 10rpx 548rpx 18rpx 0rpx;
}
.taskList-box {
  display: flex;
  .taskList {
    width: 220rpx;
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(211, 225, 249, 0.67);
    border-radius: 24rpx;
    justify-content: center;
    .text {
      color: #333333;
    }
  }
}
.task-way {
  width: 750rpx;
  height: 986rpx;
  margin-top: 36rpx;
  background: #ffffff;
  box-shadow: 0rpx -12rpx 20rpx 0rpx rgba(222, 234, 255, 0.25);
  border-radius: 28rpx 28rpx 0rpx 0rpx;
  .title-box {
    margin-top: 48rpx;
  }
  .more {
    color: #666666;
    font-size: 24rpx;
    margin-left: 334rpx;
  }
  .wayList {
    width: 666rpx;
    height: 200rpx;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0rpx 8rpx 20rpx 0rpx #e4eaff;
    margin-top: 30rpx;
    .icon {
      width: 88rpx;
      height: 88rpx;
      margin: 38rpx 14rpx 0rpx 16rpx;
    }
    .job,
    .activity,
    .other {
      width: 112rpx;
      height: 36rpx;

      border-radius: 16rpx 0rpx 16rpx 0rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
    }
    .job-box {
      display: flex;
      .title-text {
        font-size: 28rpx;
        color: #111111;
        margin-right: 34rpx;
        max-width: 320rpx;
      }
    }
  }
}
.slot-icon {
  width: 21px;
  height: 21px;
  background-color: red;
  border-radius: 100px;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  text-align: center;
}
.finish-image {
  width: 168rpx;
  height: 148rpx;
  margin-left: 213rpx;
}
</style>
